<template>
      <div id="mountNode"></div>
</template>
<script>
import G6 from "@antv/g6/build/g6";
export default{
    data(){
        return{
            gData:{
                nodes: [{
                    x: 100,
                    y: 100,
                    shape: 'circle',
                    label: '圆形',
                },{
                    x: 200,
                    y: 100,
                    shape: 'rect',
                    label: '矩形',
                },{
                    id: 'node-ellipse',
                    x: 330,
                    y: 100,
                    shape: 'ellipse',
                    label: '椭圆'
                },{
                    id: 'node-diamond',
                    x: 460,
                    y: 100,
                    shape: 'diamond',
                    label: '菱形'
                },{
                    id: 'node-triangle',
                    x: 560,
                    y: 100,
                    //size: 80,
                    shape: 'triangle',
                    label: '三角形'
                },{
                    id: 'node-star',
                    x: 660,
                    y: 100,
                    //size: [60, 30],
                    shape: 'star',
                    label: '星形'
                },{
                    x: 760,
                    y: 100,
                    size: 50,
                    shape: 'image',
                    img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
                    label: '图片',
                },{
                    id: 'node-modelRect',
                    x: 900,
                    y: 100,
                    shape: 'modelRect',
                    label: '菱形',
                    description:'描述'
                }],
                // 边集
                edges: [
                     
                ]
            },
            height: document.documentElement.clientHeight-10,
            width:document.documentElement.clientWidth-205,
        }
    },
    created(){
        
    },
    mounted(){
         this.$nextTick(() => {
            this.init();
            });
    },
    methods:{
        init(){
            //图实例化时，至少需要为图设置容器、宽、高：
            const graph = new G6.Graph({
                container: 'mountNode', // 指定挂载容器
                width: this.width,             // 图的宽度
                height: this.height,             // 图的高度
                 fitView: true,              //设置是否将图适配到画布中；
                fitViewPadding: [ 20, 40, 50, 20 ] //画布上四周的留白宽度。
            });
            //数据的加载和图的渲染是两个步骤，可以分开进行。
             graph.data(this.gData);  // 加载数据
            graph.render();        // 渲染
        }
    }
}
</script>
